    

<template>
   <view class="uni-container-orderDetail">
        <div class="header">
            <img src="https://cdn.yueyangshuyuan.com/bgtop.png" alt="" v-if="orderObj.status!==10" class='bg'>
            <div class='waiting-pay clearfix' v-if="orderObj.status==10">
                <img src="https://cdn.yueyangshuyuan.com/dengdai.png" alt="" class='fl'>
                <div class='fl'>
                    <h3>等待支付</h3>
                    <span class='count-time'>请在{{countTimer}}内支付</span>
                </div>
                <div class="fr">
                    <span class="o-p-d fl">¥<span class="price">{{orderObj.totalPrice}}</span></span><br>
                    <span class='pirce-detail fr' @tap="PopUpFun(true)">价格明细</span>
                </div>
            </div>
           <div class='other-status clearfix' v-else>
               <img :src='orderObj.imgSrc' alt="" class='fl icon-img' :class="'status'+Number(orderObj.status)">
                <div class='fl'>
                    <h3>{{orderObj.tipTitle}}</h3>
                    <span class='count-time'>{{orderObj.tipDetail}}</span>
                </div>
                <div class='fr more' @tap='showTimeline'>
                    <img src="https://cdn.yueyangshuyuan.com/mor.png" alt=""   v-if="orderObj.status == 30||orderObj.status ==50">
                </div>
                
           </div>
           
        </div>
        <div class='order-info'>
            <div class='clearfix order-title'@tap='ToMerchDetail' >
                <h3 class='fl'>{{orderObj.merchTitle}}</h3>
                <img src="https://cdn.yueyangshuyuan.com/mor.png" alt="" class='fr'>
            </div>
            <ul class='order-merch'>
                <li>
                    <span class="label">出行日期</span>
                    <span class="info">{{orderObj.merchEffectDate}}</span>
                </li>
                <li>
                    <span class="label">出游人数</span>
                    <span class="info">成人*{{orderObj.merchCount}}</span>
                </li>
                <li>
                    <span class="label">联系人</span>
                    <span class="info">{{orderObj.contactName}}</span>
                </li>
                <li>
                    <span class="label">手机号</span>
                    <span class="info">{{orderObj.contactPhone}}</span>
                </li>
            </ul>
            <div class='gray'></div>
            <ul class='orderTourists'>
                <li class='title'> 出游人信息 </li>
                <li v-for="(item,index) in orderObj.orderTourists" :key="index">
                    <div class='name'>{{item.name}}</div>
                    <div class='card-info'>
                        <span class="label">身份证号</span>
                        <span class="info">{{item.cardNo}}</span>
                    </div>
                </li>
            </ul>
            <div class='gray'></div>
            <div class='order-detail'>
                <h3 class='title'>订单详情</h3>
                <div>
                    <span class="label">订单编号：</span>
                    <span class="info">{{orderObj.sn}}</span>
                </div>
                <div>
                    <span class="label">下单时间：</span>
                    <span class="info">{{orderObj.createdTime}}</span>
                </div>
            </div>
        </div>
        <div class='footer clearfix' v-if="orderObj.status == 10||20">
            <div class='buyBtn fr'v-if="orderObj.status ==10" @tap.stop="pay()">立即支付</div>
            <div class='fr buyBtn buyBtnGary' v-if="orderObj.status == 20" @tap.stop="customerHandle()">联系客服</div>
        </div>
        <ul class='time-line' v-if="lineTime"  @tap='hideLine'>
            <li v-for="(item,index) in lineTimeArr" :key="index">
                <div class='line-title clearfix'>
                    <img src="https://cdn.yueyangshuyuan.com/zhong1.png" alt="" v-if="item.current" class='fl'>
                    <img src="https://cdn.yueyangshuyuan.com/zhong2.png" alt="" class='fl' v-if="!item.current">
                    <h3 class='fl'>{{item.showDesc}}</h3>
                    <span>{{item.createdTime}}</span>
                </div>
                <div class='line-time'></div>
            </li>
        </ul>
         <div class="mask" v-if="showPopUp" @tap='PopUpFun(false)'></div>
        <div class="popUp" v-if="showPopUp">
            <div  class="popUp-detail">
                <h3>价格明细</h3>
                <div v-if="isVIP" class="isVip">
                    <div>¥{{orderObj.discountOnePrice}}/人 × {{orderObj.merchCount}}人 </div>
                    <p>商品原价为¥{{orderObj.merchPrice}}/人 , 会员折扣已优惠 <span>{{orderObj.discounted}}元</span></p>
                </div>
                <div v-else class="notVIp">¥{{orderObj.discountOnePrice}}/人 × {{orderObj.merchCount}}人 </div>
            </div>
        </div>
    </view>
</template>
<script>
import {mapState,mapMutations} from 'vuex';
import * as util from '../../util.js';

export default {
    computed: {
        ...mapState(['hasLogin', 'isVIP','servicePhone'])
    },
    data(){
        return{
            countTimer:'00分00秒',
            timer:null,
            orderId:0,
            orderObj:null,
            lineTime:false,
            showPopUp:false,
            lineTimeArr:[],
        }
    },
    onLoad(options){
        this.orderId = options.orderId;
        this.preDataId =  options.orderId
    },
    mounted(){
        this.getServicePhone()
    },
    methods:{
        ...mapMutations(['getServicePhone','getPhoneType']),
        pay(){
            //支付成功
            this.requestPayment();
        },
        orderResult(){//支付成功通知后端更改订单状态
            this.$api.orderResult({
                id:this.preDataId
            }).then(()=>{
                this.orderDetail();
            })
        },
        async requestPayment(){
            let orderInfo = await this.getOrderInfo();
            if(orderInfo.code == -1) {
                uni.showModal({
                    content: orderInfo.message,
                    showCancel: false,
                    success: (res)=> {
                        this.orderDetail();
                    }
                })
                return;
            }
            orderInfo.data.package = orderInfo.data.packageValue
            uni.requestPayment({
                provider: 'wxpay',
                ...orderInfo.data,
                success: (e) => {
                    uni.showToast({
                        title: "支付成功!",
                        icon: 'none',
                    });
                    this.orderResult();
                },
                fail: (e) => {
                    console.log("fail", e);
                    if(e.errMsg == "requestPayment:fail cancel"){//商户取消
                        // this.payTips = true;
                    }else{
                        uni.showModal({
                            content: "支付失败!",
                            showCancel: false
                        })
                    }
                },
                complete: () => {
                    // this.providerList[index].loading = false;
                }
            })
        },
        getOrderInfo() {
            return new Promise((res,rej) => {
                this.$api.orderDetail({
                    id:this.preDataId
                }).then(json=>{
                    if(json.status == 40){//已取消
                        uni.showToast({
                            title: "因超时未支付，订单已取消",
                            icon: 'none',
                        });
                        setTimeout(()=>{
                            this.orderDetail();
                        },1000)
                    }else if(json.status == 10){//待支付
                        this.$api.orderPrepay({
                            orderId:this.preDataId,
                            appType:1
                        }).then(json=>{
                            res(json);
                        })
                    }
                })
            });
        },
        payOnceAgn(item){
            this.ToOrderDetail(item);
        },
        countDownFun(){
            let m,s,count = 60*60-1,payEndTime=this.orderObj.payEndTime/1000-1;//60分钟
            this.timer = setInterval(()=>{
                if(payEndTime){
                    count = (payEndTime - Date.parse(new Date())/1000);
                    if(count<0){
                        clearInterval(this.timer);
                        this.orderDetail();
                    }else{
                        m = util.getMinSec(count).m;
                        s = util.getMinSec(count).s;
                        this.countTimer = `${m}分${s}秒`;
                    }
                }
            },1000);
        },
        orderDetail(){//76
            this.$api.orderDetail({id:this.orderId||76}).then(json=>{
                json.createdTime  = util.FormatDate(new Date(Number(json.createdTime )),'yyyy-MM-dd hh:mm');
                json.merchEffectDate  = util.FormatDate(new Date(Number(json.merchEffectDate )),'yyyy年MM月dd日');
                this.changeData(json);
                this.orderObj = json;
                if(json.status == 10 &&json.payEndTime > Date.parse(new Date())){
                    let diffTime = (json.payEndTime - Date.parse(new Date()))/1000;
                    let m = util.getMinSec(diffTime).m;
                    let s = util.getMinSec(diffTime).s;
                    this.countTimer = `${m}分${s}秒`;
                    this.countDownFun();
                };
                if(json.status == 30||json.status == 50){
                    this.orderTimeline(json)
                }
            })
        } ,
        changeData(json){
            switch(json.status){
                case 20://待出行
                    json.imgSrc = 'https://cdn.yueyangshuyuan.com/chuxing.png';
                    json.tipTitle = '待出行';
                    json.tipDetail = '温馨提示：出发前请核对好行程。出游人请带好身份证件';
                break;
                case 30://已成交
                    json.imgSrc = 'https://cdn.yueyangshuyuan.com/chengjiao.png';
                    json.tipTitle = '已成交';
                    json.tipDetail = '交易成功，期待您的再次光临';
                break;
                case 40://已取消
                    json.imgSrc = 'https://cdn.yueyangshuyuan.com/quxiao.png';
                    json.tipTitle = '已取消';
                    json.tipDetail = '取消原因：在有效期间内未完成支付';
                break;
                case 50://已退款
                    json.imgSrc = 'https://cdn.yueyangshuyuan.com/tuikuan.png';
                    json.tipTitle = '已退款';
                    json.tipDetail = '退款一般1-2个工作日退回支付原账户，请注意查收';
                break;
            }
        },
        showTimeline(){
            this.lineTime = true;
        },
        hideLine(){
            this.lineTime = false;
        },
        PopUpFun(bool){
            this.showPopUp = bool;
        },
        //点击客服
        customerHandle(){
            uni.makePhoneCall({
                phoneNumber: this.servicePhone
            });
        },
        ToMerchDetail(){
            uni.navigateTo({
				url: '/pages/detail/detail?merchId='+ this.orderObj.merchId
			});
        },
        orderTimeline(obj){
            this.$api.orderTimeline({
                id:this.orderId||76,
                type:obj.status == 30?1:2
            }).then(json=>{
                this.lineTimeArr = json;
                this.lineTimeArr.map(item=>{
                    item.createdTime = util.FormatDate(new Date(Number(item.createdTime )),'yyyy-MM-dd hh:mm');
                })
            })
        }
    },
    onShow() {
        this.orderDetail();
    },
    onUnload(){
        clearInterval(this.timer)
    },
}
</script>
<style lang="scss" >
    .fl {
		float: left;
		display: inline;
	}
	.fr {
		float: right;
		display: inline;
	}
	.clearfix:after {
		clear: both;
		content: ".";
		display: block;
		font-size: 0;
		height: 0;
		line-height: 0;
		visibility: hidden;
	}
	.clearfix {
		clear: both;
		zoom: 1;
    }
    .Ellipsis{
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }
    .gray{
        background: #FAFAFA;
        height:20upx;
    }
    .uni-container-orderDetail{
        .header{
            height: 170upx;
            background: #F7F7F7;
            padding: 38upx 25upx;
            box-sizing: border-box;
            position: relative;
            .bg{
                height: 100%;
                width: 100%;
                position: absolute;
                z-index: 0;
                top: 0;
                left:0;
            }
            .waiting-pay{
                img{
                    width: 38upx;
                    height: 38upx;
                    margin-right: 20upx;
                }
                h3{
                    font-weight: bold;  
                    font-size: 36upx;
                    color: #262626;
                }
                .count-time{
                    font-size: 24upx;
                    color: #777777;
                    margin-top: 10upx;
                }
                .o-p-d{
                    font-size: 30upx;
                    color: #E65126;
                    font-weight: bold;
                    .price{
                        font-size: 36upx;
                        margin-left: 2px;
                    }
                }
                .pirce-detail{
                    font-size: 24upx;
                    color: #777777;
                    text-decoration: underline;
                    margin-top: 10upx;
                }
            }
            .other-status{
                position: relative;
                z-index: 2;
                .status20{//待出行
                    width: 39upx;
                    height: 38upx;
                }
                .status30{//已成交
                    width: 38upx;
                    height: 38upx;
                }
                .status40{//已取消
                    width: 36upx;
                    height: 29upx;
                }
                .status50{//已退款
                    width: 34upx;
                    height: 37upx;
                }
                .icon-img{
                    margin-right: 20rpx;
                }
                h3{
                    font-weight: bold;  
                    font-size: 36upx;
                    color: #262626;
                }
                .count-time{
                    font-size: 24upx;
                    color: #777777;
                    margin-top: 10upx;
                }
                .more{
                    margin-top: 30upx;
                    padding-left: 30upx;
                    img{
                        width: 18upx;
                        height: 30upx;
                    }
                }
            }
        }
        .order-info{
            margin-bottom: 150upx;
            padding: 0 25upx;
             .order-title{
                background: #fff;
                margin-bottom: 26upx;
                padding-top: 24upx;
                padding-bottom: 24upx;
                border-bottom: 1px solid #EFF3F5;
                h3{
                    font-size: 28upx;
                    color: #262626;
                    width: 570upx;
                    font-weight:bold;
                    line-height: 40upx;
                }
                img{
                    width: 18upx;
                    height: 30upx;
                }
            }
            .order-merch{
                padding: 0 25upx;
                li{
                    margin-bottom: 18upx;
                    font-size: 24upx;
                    color: #777777;
                }
                .label{
                    display: inline-block;
                    width: 117upx;
                }
            }
            .orderTourists{
                margin: 0 25upx;
               .title{
                    font-size: 28upx;
                    color: #262626;
                    font-weight:bold;
                }
                li{
                    border-bottom:1px solid #EFF3F5;
                    padding: 24upx 0;
                    .name{
                        font-size: 28upx;
                        color: #262626;
                        padding-right: 20upx;
                        margin-bottom: 14upx;
                    }
                    .card-info{
                        font-size: 24upx;
                        color: #777777; 
                        .info{
                            padding-left: 10upx;
                        }
                    }
                    &:last-child{
                        border-bottom:none;
                    }
                }
            }
            .order-detail{
                margin: 0 25upx;
                .title{
                    padding: 24upx 0;
                    font-size: 28upx;
                    color: #262626;
                    font-weight:bold;
                    border-bottom:1px solid #EFF3F5;
                    margin-bottom: 24upx;
                }
                >div{
                    font-size: 24upx;
                    color: #777777; 
                    margin-bottom: 12upx;
                    .label{
                        margin-right: 10upx;
                    }
                }

            }
        }
        .footer{
            background: #FFFFFF;
            box-shadow: 0 -10upx 16upx 0 rgba(164,164,164,0.20);
            height: 108upx;
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 5;
            .buyBtn{
                border: 1px solid #E25422;
                border-radius: 34upx;
                width: 178upx;
                height: 68upx;
                line-height: 68upx;
                text-align: center;
                font-size: 28upx;
                color: #E25422;
                font-weight: bold;
                margin-right: 27upx;
                margin-top: 19upx;
            }
            .buyBtnGary{
                color: #777777;
                border: 1px solid #D1D1D1;
            }
        }
        .mask{
            height: 100%;
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background:rgba(0,0,0,.5);
            z-index: 3;
        }
        .time-line{
            height: 100%;
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            padding-top: 166upx;
            padding-left: 30upx;
            z-index: 6;
            background:rgba(0,0,0,.5);
            li{
                position: relative;
                height: 162upx;
                .line-title{
                    img{
                        width: 36upx;
                        height: 36upx;
                    }
                    h3{
                        margin-left: 30upx;
                        font-size: 32upx;
                        color: #FFFFFF;
                        font-weight: 800;
                        line-height: 32rpx;
                        width: 620upx;
                        line-height: 40upx;
                    }
                    span{
                        font-size: 24upx;
                        color: #FFFFFF;
                        margin-left: 63upx;
                        position: relative;
                        top: 8upx;
                    }
                }
                .line-time{
                    margin-left: 16upx;
                    margin-top: 12upx;
                    margin-bottom: 12upx;
                    height: 100upx;
                    border-left: 1px dashed #fff;
                    position: absolute;
                    top: 40rpx;
                }
                &:last-child{
                    .line-time{
                        border-left:none;
                    }
                }
            }
        }
        .popUp{
            width: 100%;
            position: fixed;
            bottom: 107upx;
            z-index: 4;
            left: 0;
            padding: 24upx;
            box-sizing: border-box;
            padding-top: 26upx;
            padding-bottom: 26upx;
            background: #fff;
            .popUp-detail{
                h3{
                    font-size: 28upx;
                    color: #262626;
                    margin-bottom: 26upx;
                    font-weight: 800;
                }
                .isVip,.notVIp{
                    font-size: 32upx;
                    color: #262626;
                    font-weight: 800;
                }
                p{
                    font-size: 24upx;
                    color: #777777;
                    margin-top: 14upx;
                    font-weight: normal;
                    >span{
                        color: #E65126;
                        margin-left: 10upx;
                    }
                }
            }
        }
    }
</style>
  